/**
 * js 逻辑部分=》类似 vue的 script 部分
 * 每个小程序的页面都由全局 Page 函数进行初始化
 * 1. data 选项：定义变量
 * 语法=》key(变量名):value(变量默认值)
 * 2. 事件绑定
 * 语法： bind:事件名称="回调函数" 或者 bind事件名称="回调函数"
 * 注意：回调函数的定义不需要加 methods
 * 
 * 3. 更新数据
 * 语法：this.setData({变量名: 变量值}) => 类似 react =》命令式
 * 方式：
 * 1. 覆盖式 =》简单和复杂类型
 * 2. 局部式 =》复杂类型 =》核心=》数据路径:最新值
 * 
 */
Page({
  data: {
    msg: 'hi 小程序！',
    count: 10,
    list: [1, 2, 3],
    obj: { name: '王武', age: 18 }
  },
  onLoad(params) {
    console.log('tabBar:', params);
  },
  // 点击减 1
  sub() {
    if (this.data.count === 1) return
    // 上一次减完 1 之后的值
    // let newVal = this.data.count - 1
    this.setData({
      count: this.data.count - 1
    })
  },
  // 点击加 1
  add() {
    this.setData({
      count: this.data.count + 1
    })
  },
  // 注意：定义函数和 data 是同级的
  handlerClick(e) {
    console.log('惦记了 button!', e);
    // 修改变量
    console.log('页面实例：', this);
    // 错误演示
    // this.msg = 'hi vue!'
    // this.data.msg = 'hi vue!'
    // 正确姿势
    this.setData({
      // 变量名:要修改的最新的值 =》覆盖式修改
      msg: 'hi vue!',
      count: 100,
      /**
       * 修改复杂类型：
       * 1. 覆盖式=》整个替换
       * 2. 局部式=》只修改其中某一部分
       */
      // obj: { name: '理智', age: 18 }
      // 修改某个属性的路径:最新的值
      'obj.name': '理智',
      // list: [1, 100, 3]
      // 通过数组下标:最新的值
      'list[1]': 1000
    })
  },
  getFocus() {
    console.log('输入框获取焦点了');
  }
})